<nav mat-tab-nav-bar>
  <a mat-tab-link [active]="currTab == 'push'" (click)="currTab = 'push'">推送数据</a>
  <a mat-tab-link [active]="currTab == 'report'" (click)="currTab = 'report'">推送报告</a>
  <a mat-tab-link [active]="currTab == 'simulate'" (click)="currTab = 'simulate'">模拟客户端</a>
</nav>

<form (ngSubmit)="sendMessage()" autocomplete="off" *ngIf="currTab == 'push'" #sendMessageForm="ngForm">

  <mat-form-field>
    <input type="text" matInput [(ngModel)]="messageForm.room" name="room" color="warn" placeholder="输入房间名" required>
    <mat-error>必填</mat-error>
  </mat-form-field>

  <mat-form-field>
    <textarea matInput rows="7" [(ngModel)]="messageForm.pushData" name="pushData" placeholder="输入推送数据(JSON字符串)"
      required></textarea>
    <mat-error>必填</mat-error>
    <mat-hint>必须是JSON字符串</mat-hint>
  </mat-form-field>

  <mat-form-field>
    <input type="text" matInput [(ngModel)]="messageForm.apnsName" name="apnsName" placeholder="输入apnsName">
  </mat-form-field>

  <mat-form-field>
    <input type="number" matInput [(ngModel)]="messageForm.expire" name="apnsName" placeholder="输入失效时间(单位小时)">
  </mat-form-field>

  <div>
    <mat-slide-toggle [checked]="messageForm.lost" color="accent" name="lost" [(ngModel)]="messageForm.lost">模拟数据丢失
    </mat-slide-toggle>
    <mat-slide-toggle [checked]="messageForm.leaveMessage" [disabled]="messageForm.lost" color="accent"
      name="leaveMessage" [(ngModel)]="messageForm.leaveMessage">离线保存</mat-slide-toggle>
    <button type="submit" [disabled]="sendMessageForm.form.invalid" mat-raised-button color="accent">发送</button>
  </div>

  <div class="toggle-to-report" *ngIf="sendId">
    <a (click)="toggleToReport()">
      查看推送报告(id:{{sendId}})
    </a>
  </div>
</form>


<form (ngSubmit)="report()" autocomplete="off" *ngIf="currTab == 'report'">
  <mat-form-field>
    <input type="text" matInput [(ngModel)]="reportMessageId" name="reportMessageId" color="warn" placeholder="输入消息ID查询"
      required>
    <button type="submit" mat-raised-button [disabled]="!reportMessageId" color="accent" matSuffix>查看</button>
    <mat-error>必填</mat-error>
  </mat-form-field>

  <textarea rows="20" readonly disabled name="reportMessage" [(ngModel)]="reportMessage"></textarea>
</form>

<div *ngIf="currTab == 'simulate'">
  <form (ngSubmit)="connect()" autocomplete="off" #conectionForm="ngForm">
    <div [hidden]="socketService.ready">

      <mat-form-field>
        <input type="text" matInput [(ngModel)]="simulateForm.userid" name="userid" color="warn"
          placeholder="输入客户端userid" required>
        <mat-error>必填</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input type="text" matInput [(ngModel)]="simulateForm.uuid" name="uuid" color="warn" placeholder="输入客户端uuid"
          required>
        <mat-error>必填</mat-error>
      </mat-form-field>

      <mat-form-field>
        <input type="text" matInput [(ngModel)]="simulateForm.platform" name="platform" color="warn"
          placeholder="输入客户端所属平台">
      </mat-form-field>

      <div style="text-align: right;">
        <mat-slide-toggle checked="simulateForm.activityBroadcast" color="accent" name="activityBroadcast"
          [(ngModel)]="simulateForm.activityBroadcast">上线/下线提醒</mat-slide-toggle>

        <button type="submit" [disabled]="conectionForm.form.invalid" *ngIf="!socketService.ready" mat-raised-button
          color="accent">上线</button>
      </div>
    </div>

    <div *ngIf="socketService.ready">

      <section class="message-list">
        <div class="title">
          <b>userid:</b> {{simulateForm.userid}}
          <b>uuid:</b> {{simulateForm.uuid}}
        </div>
        <div *ngFor="let item of messageList" class="message" (click)="showMessage(item)">{{item | json}}</div>
      </section>

      <div class="room-list">
        <div class="title">已加入的房间列表</div>
        <div class="label" *ngFor="let room of roomSet">{{room}}</div>
      </div>

      <mat-form-field>
        <input type="text" matInput [(ngModel)]="simulateForm.joinRooms" name="joinRooms" color="warn"
          placeholder="输入房间，已逗号分隔">
        <button type="button" mat-raised-button (click)="joinRoom()" [disabled]="!simulateForm.joinRooms" color="accent"
          matSuffix>加入房间</button>
      </mat-form-field>

      <mat-form-field>
        <input type="text" matInput [(ngModel)]="simulateForm.leaveRooms" name="leaveRooms" color="warn"
          placeholder="输入房间，已逗号分隔">
        <button type="button" mat-raised-button (click)="leaveRoom()" [disabled]="!simulateForm.leaveRooms"
          color="accent" matSuffix>离开房间</button>
      </mat-form-field>

      <div>
        输入设备信息：
        <a class="pull-right underline" (click)="getClientInfo()">查看信息</a>&nbsp;&nbsp;
      </div>

      <mat-form-field>
        <textarea matInput rows="3" name="clientInfo" [(ngModel)]="simulateForm.clientInfo"></textarea>
      </mat-form-field>

      <div class="pull-right">
        <button type="button" mat-raised-button (click)="setClientInfo()" color="accent"
          matSuffix>设置信息</button>&nbsp;&nbsp;
        <button type="button" mat-raised-button color="warn" (click)="disconnect()">下线</button>
      </div>
    </div>
  </form>

</div>
